<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>


<!doctype html>
<html lang="zh">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="通辽航空管理平台 ">
		<title>通辽航空管理平台 </title>
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" href="fonts/style.css">
		<link rel="stylesheet" href="css/main.css">
		<link rel="stylesheet" href="css/css.css">

	</head>
	<body>
		<header class="header">
			<div class="container-fluid">
				<div class="row gutters">
					<div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-9">
						<a href="admin_index.jsp" class="logo"> <img src="img/logo.png">通辽航空管理平台  </a>
					</div>
					<div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-3">
						<ul class="header-actions">
							<li class="dropdown d-none d-sm-block">

								<div class="dropdown-menu lrg" aria-labelledby="notifications">
									<div class="dropdown-menu-header">
										<h5>Notifications</h5>
										<p class="m-0 sub-title">You have 5 unread notifications</p>
									</div>	
									<ul class="header-notifications">
											<li>
												<a href="#" class="clearfix">
													<div class="avatar">
														<img src="img/user24.png" alt="avatar" />
														<span class="notify-iocn icon-drafts text-danger"></span>
													</div>
													<div class="details">
														<h6>Dr. Clive</h6>
														<p>Appointed as a new President 2019-2020</p>
													</div>
												</a>
											</li>
											<li>
												<a href="#" class="clearfix">
													<div class="avatar">
														<img src="img/user21.png" alt="avatar" />
														<span class="notify-iocn icon-layers text-info"></span>
													</div>
													<div class="details">
														<h6>Dr. G. Levsmia</h6>
														<p>Will be on leave on October 2nd week.</p>
													</div>
												</a>
											</li>
											<li>
												<a href="#" class="clearfix">
													<div class="avatar">
														<img src="img/user19.png" alt="avatar" />
														<span class="notify-iocn icon-person_add text-success"></span>
													</div>
													<div class="details">
														<h6>Dr. George S</h6>
														<p>Sent new applointments list</p>
													</div>
												</a>
											</li>
										</ul>
								</div>
							</li>
							<li class="dropdown">
								<a href="#" id="userSettings" class="user-settings" data-toggle="dropdown" aria-haspopup="true">
									<span class="user-name">管理员</span>
									<span class="avatar">NR<span class="status busy"></span></span>
								</a>
								<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userSettings">
									<div class="header-profile-actions">

										<a href="hospital-add-doctor.html"><i class="icon-user1"></i> My Profile</a>
										<a href="account-settings.html"><i class="icon-settings1"></i> Account Settings</a>
										<a href="hospital-reviews.html"><i class="icon-activity"></i> Activity Logs</a>
										<a href="login.html"><i class="icon-log-out1"></i> Sign Out</a>
									</div>
								</div>
							</li>
						</ul>						
					</div>
				</div>
			</div>
		</header>
		<div class="container-fluid">
			<!-- Navigation start -->
			<nav class="navbar navbar-expand-lg custom-navbar">
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#royalHospitalsNavbar" aria-controls="royalHospitalsNavbar" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon">
						<i></i>
						<i></i>
						<i></i>
					</span>
				</button>
				<div class="collapse navbar-collapse" id="royalHospitalsNavbar">
					<ul class="navbar-nav">
						<li class="nav-item">
							<a class="nav-link " href="FlightsServlet?pageNo=1">
								<i class="icon-home nav-icon"></i>
								首页</a>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" href="#" id="doctoRs" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="icon-person_pin nav-icon"></i>
								数据录入
							</a>
							<ul class="dropdown-menu" aria-labelledby="doctoRs">
								<li><a class="dropdown-item" href="flight_insert.jsp">录入航班</a></li>
								<li><a class="dropdown-item" href="aircraft_insert.jsp">录入飞机</a></li>
							</ul>
						</li>
					
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle active-page" href="#" id="formsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="icon-assignment_turned_in nav-icon"></i>
								申请管理
							</a>
							<ul class="dropdown-menu" aria-labelledby="formsDropdown">
								<li><a class="dropdown-item active-page" href="QuitsServlet?pageNo=1">退票申请列表</a></li>
								<li><a class="dropdown-item " href="AuditsServlet?pageNo=1">改签申请列表</a></li>
							</ul>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle " href="#" id="uiElementsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="icon-assignment nav-icon"></i>
								数据管理
							</a>
							<ul class="dropdown-menu" aria-labelledby="uiElementsDropdown">
								<li><a class="dropdown-item" href="${pageContext.request.contextPath}/UserList?pageNo=1">用户数据管理</a></li>
								<li><a class="dropdown-item" href="${pageContext.request.contextPath}/AircraftListServlet?pageNo=1">飞机数据管理</a></li>

							</ul>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" href="#" id="loginDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="icon-burst_mode nav-icon"></i>
								注册申请 
							</a>
							<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="loginDropdown">
								<li><a class="dropdown-item " href="RegisterListServlet?pageNo=1">用户注册申请</a></li>
							</ul>
						</li>
					
					</ul>
				</div>
			</nav>
			<div class="main-container">
				<div class="page-header">
					<ol class="breadcrumb">
						<li class="breadcrumb-item">数据管理</li>
						<li class="breadcrumb-item active">飞机数据管理</li>
					</ol>
				</div>

                <div class="content-wrapper">
                    <div class="aircraft-list-container">
						<c:choose>
							<c:when test="${ empty list}">
								<div class="no-data">
									<i class="fas fa-ticket-alt"></i>
									<p>暂无待处理票务数据</p>
								</div>
							</c:when>
							<c:otherwise>
								<c:forEach items="${list}" var="ticket">
									<form method="get" action="QuitDisposeServlet" class="ticket-card">
										<input type="hidden" name="ticket_id" value="${ticket.ticketId}">

										<div class="data-grid">
											<div class="data-item" data-field="id">
												<span class="data-label">票据ID</span>
												<span class="data-value">${ticket.ticketId}</span>
											  </div>
											<div class="data-item" data-field="id">
												<span class="data-label">用户ID</span>
												<span class="data-value">${ticket.userId}</span>
											</div>
											<div class="data-item">
												<span class="data-label">航班号</span>
												<span class="data-value">${ticket.flightId}</span>
											</div>
											<div class="data-item">
												<span class="data-label">座位号</span>
												<span class="data-value highlight">${ticket.seatNumber}</span>
											</div>
										</div>
				
										<div class="action-buttons">
											<button type="submit" 
													name="type" 
													value="pass"
													class="action-btn success">
												<i class="fas fa-check"></i>
												批准
											</button>
										
											<button type="submit" 
													name="type" 
													value="refuse"
													class="action-btn danger">
												<i class="fas fa-times"></i>
												退回
											</button>
										</div>
									</form>
								</c:forEach>
							</c:otherwise>
						</c:choose>
                     <!-- 分页 -->
                     <c:if test="${box.totalPages > 1}">
                        <div class="card-footer bg-white">
                            <nav aria-label="Page navigation">
                                <ul class="pagination justify-content-center mb-0">
                                    <li class="page-item ${box.pageNo == 1 ? 'disabled' : ''}">
                                        <a class="page-link" 
                                            href="QuitsServlet?pageNo=${box.pageNo - 1}" 
                                            aria-label="Previous">
                                            <span aria-hidden="true">&laquo;</span>
                                        </a>
                                    </li>
                                    
                                    <c:forEach begin="1" end="${box.totalPages}" var="i">
                                        <li class="page-item ${i == box.pageNo ? 'active' : ''}">
                                            <a class="page-link" 
                                                href="QuitsServlet?pageNo=${i}">${i}</a>
                                        </li>
                                    </c:forEach>
                                    
                                    <li class="page-item ${box.pageNo == box.totalPages ? 'disabled' : ''}">
                                        <a class="page-link" 
                                            href="QuitsServlet?pageNo=${box.pageNo + 1}" 
                                            aria-label="Next">
                                            <span aria-hidden="true">&raquo;</span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </c:if>
                </div>


			</div>

			<footer class="main-footer"> 2025 © Copyright by <a href="https://www.bootstrapmb.com">bootstrapMB</a>-通辽航空管理平台</footer>

		</div>
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.bundle.min.js"></script>
		<script src="js/moment.js"></script>

		<script src="laydate/laydate.js" type="text/javascript"></script> 
		<script>
		lay('#version').html('-v'+ laydate.v);
		laydate.render({
			elem: '#date'
		 ,range: true
		  ,theme: '#13a98c'
		});
		</script>

<style>
	/* 保持与之前相同的CSS样式 */
	.ticket-card {
		background: #fff;
		border-radius: 12px;
		box-shadow: 0 3px 10px rgba(0,0,0,0.1);
		margin-bottom: 1.5rem;
		padding: 1.5rem;
		transition: transform 0.2s;
	}
	
	.data-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: 1.5rem;
		margin-bottom: 1.5rem;
	}
	
	/* 其他样式与之前PHP版本保持一致 */
	.aircraft-list-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* 数据卡片 */
.ticket-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    transition: transform 0.2s;
}

.ticket-card:hover {
    transform: translateY(-2px);
}

/* 数据网格布局 */
.data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.data-item {
    display: flex;
    flex-direction: column;
    padding: 0.8rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.data-label {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 0.4rem;
}

.data-value {
    font-size: 1.1rem;
    color: #2c3e50;
    font-weight: 500;
}

.highlight {
    color: #e74c3c;
    font-weight: 600;
}

/* 操作按钮 */
.action-buttons {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    border-top: 1px solid #eee;
    padding-top: 1.5rem;
}

.action-btn {
    padding: 0.6rem 1.5rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s;
}

.action-btn i {
    font-size: 1.1rem;
}

.success {
    background: #2ecc71;
    color: white;
}

.success:hover {
    background: #27ae60;
}

.danger {
    background: #e74c3c;
    color: white;
}

.danger:hover {
    background: #c0392b;
}

/* 无数据样式 */
.no-data {
    text-align: center;
    padding: 3rem;
    color: #95a5a6;
}

.no-data i {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.no-data p {
    font-size: 1.2rem;
    margin: 0;
}
.data-item {
  display: flex;
  flex-direction: column;
  padding: 0.8rem;
  background: #f8f9fa;
  border-radius: 8px;
  min-width: 250px; /* 增加最小宽度 */
}

.data-value {
  font-size: 1.1rem;
  color: #2c3e50;
  font-weight: 500;
  /* 新增长文本处理 */
  word-break: break-all; /* 强制换行 */
  overflow-wrap: anywhere; /* 更智能的断词 */
  line-height: 1.4; /* 增加行高 */
}

/* ====== 特定字段优化 ====== */
/* 为ID类字段添加悬停展开效果 */
.data-item[data-field="id"] .data-value {
  max-width: 300px; /* 控制最大宽度 */
  white-space: nowrap; /* 不换行 */
  overflow: hidden;
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  cursor: help; /* 鼠标样式提示 */
}

.data-item[data-field="id"] .data-value:hover {
  white-space: normal; /* 悬停时显示全文 */
  overflow: visible;
  background: #fff;
  z-index: 1;
  position: relative;
}
	</style>
	
	<!-- 引入图标库 -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

	</body>
</html>